<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>生产</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<script src="/js/echarts.min.js"></script>
<body>
<style>
  body{
    background-color: white;
  }
  .dddd{
    display: inline-block;
  }
  #main{
    float: left;
  }
  #zhexian{
    float: right;
  }
</style>
<div id="app">
  <el-col class="dddd">
    <el-card shadow="hover">
      <div id="main" style="width: 40%; height: 400px; margin-right: 20px;"></div>
      <div id="zhexian" style="width: 600px; height: 400px; margin-right: 20px;"></div>
    </el-card>
  </el-col>
</div>

<script>
  new Vue({
    el: "#app",
    methods: {
      yuan() {
        axios.get("/pur/tj")
                .then(({data}) => {
                  const f = data.map(item => ( item.name))
                  const c = data.map(item => ( item.value))
                  var myChart = echarts.init(document.getElementById("main"));
                  option = {
                    title: {
                      text: '生产柱状统计图',
                      subtext: 'Fake Data',
                      left: 'center'
                    },
                    tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                        type: 'shadow'
                      }
                    },
                    grid: {
                      left: '3%',
                      right: '4%',
                      bottom: '3%',
                      containLabel: true
                    },
                    xAxis: [
                      {
                        type: 'category',
                        data: f,
                        axisTick: {
                          alignWithLabel: true
                        }
                      }
                    ],
                    yAxis: [
                      {
                        type: 'value'
                      }
                    ],
                    series: [
                      {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: c
                      }
                    ]
                  };
                  myChart.setOption(option);
                })

      },
      zhexian() {
        axios.get("/pur/tj")
                .then(({data}) => {
                  const f = data.map(item => (item.name))
                  const c = data.map(item => (item.value))
                  var myChart = echarts.init(document.getElementById("zhexian"));
                  option = {
                    title: {
                      text: '生产折现统计图',
                      subtext: 'Fake Data',
                      left: 'center'
                    },
                    tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                        type: 'shadow'
                      }
                    },
                    grid: {
                      left: '3%',
                      right: '4%',
                      bottom: '3%',
                      containLabel: true
                    },
                    xAxis: [
                      {
                        type: 'category',
                        data: f,
                        axisTick: {
                          alignWithLabel: true
                        }
                      }
                    ],
                    yAxis: [
                      {
                        type: 'value'
                      }
                    ],
                    series: [
                      {
                        name: 'Direct',
                        type: 'line',
                        barWidth: '60%',
                        data: c
                      }
                    ]
                  };
                  myChart.setOption(option);
                })

      },

    },
    mounted() {
      this.yuan();
      this.zhexian();
    }
  });
</script>
</body>
</html>